<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Title</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            html {
                overflow: hidden;
            }
        </style>
    </head>
<body>
    <script type="text/javascript" src="./three.min.js"></script>
    <script type="text/javascript" src="./Tween.js"></script>
    <script>
        var scene, camera, renderer;
        var ww = window.innerWidth;
        var wh = window.innerHeight;
        var aspect = ww / wh;
        function initThree() {
            // 创建场景
            scene = new THREE.Scene();
            // 创建相机
            camera = new THREE.PerspectiveCamera(70, aspect, 1, 2000);
            camera.position.set(0, 0, 100);
            // 创建渲染器（WebGL渲染器）
            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setClearColor(0x000000, 1);
            renderer.setSize(ww, wh);
            document.body.appendChild(renderer.domElement);

            createPointLight();
            createDireLight();
        }
        // 创建点光源 需要照亮场景
        function createPointLight() {
            var light = new THREE.PointLight(0xffe502, 1, 1000);
            light.position.set(50, 50, 50);
            scene.add(light);
        }

        // 创建方向光 金属感强烈
        function createDireLight() {
            var direLight = new THREE.DirectionalLight(0xffe502, 1000);
            direLight.position.set(0, 500, 0);
            direLight.castShadow = true;
            scene.add(direLight);
        }

        // 执行动画
        function animate() {
            TWEEN.update();
            renderer.render(scene, camera);
            requestAnimationFrame(animate)
        }

        // 创建文字
        function createText() {
            //helvetiker_bold.typeface.json   51JOB
            //
            var text = new THREE.FontLoader().load('./json/YouSheBiaoTiHei_Regular.json', function(text) {
                //汉体书写信息技术标准相容档案下载使用界面简单支援服务升级资讯专业制作创意空间快速无线上网
                var gem = new THREE.TextGeometry('信息技术标准', {
                    size: 20, //字号大小，一般为大写字母的高度
                    height: 10, //文字的厚度
                    weight: 'normal', //值为'normal'或'bold'，表示是否加粗
                    font: text, //字体，默认是'helvetiker'，需对应引用的字体文件
                    style: 'normal', //值为'normal'或'italics'，表示是否斜体
                    bevelThickness: 1, //倒角厚度
                    bevelSize: 1, //倒角宽度
                    curveSegments: 30,//弧线分段数，使得文字的曲线更加光滑
                    bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
                });
                gem.center();
                var mat = new THREE.MeshPhongMaterial({
                    color: 0xffe502,
                    specular: 0x009900,
                    shininess: 30,
                    shading: THREE.FlatShading
                });
                var textObj = new THREE.Mesh(gem, mat);
                textObj.castShadow = true;
                scene.add(textObj);
                new TWEEN.Tween(textObj.rotation).to({y: Math.PI * 2}, 2000).repeat(Infinity).yoyo(true).start();
            });
        }
        // start
        function threeStart() {
            initThree();
            createText();
            animate();
        }
        // resize
        function onResize() {
            ww = window.innerWidth;
            wh = window.innerHeight;
            camera.aspect = ww / wh;
            camera.updateProjectionMatrix();
            renderer.setSize(ww, wh);
        }
        window.addEventListener('load', threeStart, false);
        window.addEventListener('resize', onResize, false);
        console.log('test update');
    </script>
<!-- <canvas width="1440" height="623" style="width: 1440px; height: 623px;"></canvas> -->
</body>
</html>